<template>
    <InfoCard>
        <template #header v-if="payInfo.item.upImg?.imgDescribe">
            <div class="text-center" v-html="payInfo.item.upImg?.imgDescribe"></div>
        </template>
        <template #content>
            <div style="text-align: center;" v-if="payInfo.item?.upImg">
                <div class="my-4" style="text-align: center;">
                    <Uploader v-model="fileList" multiple />
                </div>
                <Button @click="uploaderFile" style="padding: 2px 8px;" size="small" :color="payInfo.theme">{{
                    payInfo.item.upImg?.imgButton }}</Button>
            </div>
        </template>
    </InfoCard>
</template>

<script setup lang="ts">
import InfoCard from './InfoCard.vue';
import request from '@/utils/request';
import { ref } from 'vue'
import { Icon, Button, Uploader,Popup, Loading, showNotify, Field, CellGroup, Form as VanForm } from "vant";
const fileList = ref([])

const props = defineProps({
    payInfo: {
        type: Object,
        default: () => ({})
    }
});

function uploadImg(file: File) {
    const formData = new FormData();
    formData.append('orderNo', props.payInfo.orderNo);
    formData.append('file[]', file);
    return request.post('/api/orderCheckIn/upload', formData)
        .then(res => {
            if (res.data.code === 1) {
                showNotify({ type: 'success', message: '上传成功' })
            }
        })
}

function uploaderFile() {
    if (fileList.value.length === 0) {
        showNotify({ type: 'danger', message: '请选择文件' })
        return;
    }
    fileList.value.forEach(item => {
        uploadImg(item.file)
    })
}
</script>